<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>赛车游戏</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div id="game-container">
        <div id="road">
            <div id="car"></div>
        </div>
        <div id="score-board">得分: <span id="score">0</span></div>
    </div>
    <script>
        // 游戏容器和道路元素
        const gameContainer = document.getElementById('game-container');
        const road = document.getElementById('road');
        const car = document.getElementById('car');
        const scoreBoard = document.getElementById('score');

        // 游戏参数
        let score = 0;
        let carX = 200;
        const carWidth = 50;
        const carHeight = 100;
        const roadWidth = 400;
        const roadHeight = 600;
        const obstacleWidth = 50;
        const obstacleHeight = 50;
        let obstacles = [];

        // 移动赛车
        function moveCar(event) {
            if (event.key === 'ArrowLeft' && carX > 0) {
                carX -= 20;
            } else if (event.key === 'ArrowRight' && carX < roadWidth - carWidth) {
                carX += 20;
            }
            car.style.left = carX + 'px';
        }

        // 创建障碍物
        function createObstacle() {
            const obstacle = document.createElement('div');
            obstacle.classList.add('obstacle');
            const randomX = Math.floor(Math.random() * (roadWidth - obstacleWidth));
            obstacle.style.left = randomX + 'px';
            obstacle.style.top = '0px';
            road.appendChild(obstacle);
            obstacles.push(obstacle);
        }

        // 移动障碍物
        function moveObstacles() {
            for (let i = 0; i < obstacles.length; i++) {
                const obstacle = obstacles[i];
                const currentTop = parseInt(obstacle.style.top);
                obstacle.style.top = (currentTop + 5) + 'px';

                // 检查碰撞
                if (
                    carX < parseInt(obstacle.style.left) + obstacleWidth &&
                    carX + carWidth > parseInt(obstacle.style.left) &&
                    0 < currentTop + obstacleHeight &&
                    carHeight > currentTop
                ) {
                    // 游戏结束
                    alert('游戏结束！得分: ' + score);
                    location.reload();
                }

                // 移除超出道路的障碍物
                if (currentTop > roadHeight) {
                    road.removeChild(obstacle);
                    obstacles.splice(i, 1);
                    i--;
                    score += 10;
                    scoreBoard.textContent = score;
                }
            }
        }

        // 游戏循环
        function gameLoop() {
            if (Math.random() < 0.02) {
                createObstacle();
            }
            moveObstacles();
            requestAnimationFrame(gameLoop);
        }

        // 初始化游戏
        car.style.left = carX + 'px';
        document.addEventListener('keydown', moveCar);
        gameLoop();
    </script>
</body>

</html>